<template>
	<view class="container">
		<view class="coupon-box">
			<view class="tab">
				<view class="tab-list">
					<view class="tab-item" :class="{'active': index == tab.active}" v-for="(item,index) in tab.list"
						:key="item.value" @tap.stop.prevent="ckTab(index)">{{item.title}}</view>
				</view>
			</view>
			<view v-if="recommendList.list.length > 0 && tab.active != 2">
				<template v-if="tab.active == 0 || tab.active == 1">
					<uv-waterfall ref="waterfall" v-model="recommendList.list" :add-time="10" :left-gap="leftGap"
						:right-gap="rightGap" :column-gap="columnGap" @changeList="changeList">
						<!-- 第一列数据 -->
						<template v-slot:list1>
							<!-- 为了磨平部分平台的BUG，必须套一层view -->
							<view>
								<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item"
									@tap.stop.prevent="onDetails(item)">
									<view class="waterfall-item__image" :style="[imageStyle(item)]">
										<image v-if="item.commentUrl" :src="item.commentUrl[0]" mode="widthFix"
											:style="{width: '100%'}"></image>
										<image v-else-if="item.videoCoverPhoto" :src="item.videoCoverPhoto"
											mode="widthFix" :style="{width: '100%'}"></image>
										<view class="video" v-if="tab.active == 1"
											@tap.stop.prevent="preview(item.videoUrl,item.videoCoverPhoto)">
											<uv-icon name="play-right-fill" color="#FFF" size="15"></uv-icon>
										</view>
									</view>
									<view class="waterfall-item__ft">
										<view class="waterfall-item__ft__desc uv-line-2">
											<text class="value">{{item.commentContent}}</text>
										</view>
									</view>
									<view class="waterfall-item__b" v-if="tab.active == 1">
										<view class="waterfall-item__b_l">
											<uv-icon name="play-right-fill" color="#000" size="15"></uv-icon>
											<text style="margin-left: 20rpx;">12</text>
										</view>
										<view class="look">查看</view>
									</view>
								</view>
							</view>
						</template>
						<!-- 第二列数据 -->
						<template v-slot:list2>
							<!-- 为了磨平部分平台的BUG，必须套一层view -->
							<view>
								<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item"
									@tap.stop.prevent="onDetails(item)">
									<view class="waterfall-item__image" :style="[imageStyle(item)]">
										<image v-if="item.commentUrl" :src="item.commentUrl[0]" mode="widthFix"
											:style="{width: '100%'}"></image>
										<image v-else-if="item.videoCoverPhoto" :src="item.videoCoverPhoto"
											mode="widthFix" :style="{width: '100%'}"></image>
										<view class="video" v-if="tab.active == 1"
											@tap.stop.prevent="preview(item.videoUrl,item.videoCoverPhoto)">
											<uv-icon name="play-right-fill" color="#FFF" size="15"></uv-icon>
										</view>
									</view>
									<view class="waterfall-item__ft">
										<view class="waterfall-item__ft__desc uv-line-2">
											<text class="value">{{item.commentContent}}</text>
										</view>
									</view>
									<view class="waterfall-item__b" v-if="tab.active == 1">
										<view class="waterfall-item__b_l">
											<uv-icon name="play-right-fill" color="#000" size="15"></uv-icon>
											<text style="margin-left: 20rpx;">12</text>
										</view>
										<view class="look">查看</view>
									</view>
								</view>
							</view>
						</template>
					</uv-waterfall>
					<!-- 加载更多组件 -->
					<uv-load-more v-if="recommendList.list.length > 5" :status="loadStatus"></uv-load-more>
				</template>
				<view class="image-list" v-else>
					<view class="upload" v-if="imageList.length < 9">
						<view class="upload-box">
							<image class="upload-image" src="../../static/images/index/tu1.png" mode=""></image>
							<view class="upload-text">上传照片</view>
						</view>
					</view>
					<view class="image-item" v-for="(item,index) in imageList"
						@tap.stop.prevent="preview(item.videoUrl)">
						<image :src="item" mode="aspectFill"></image>
						<view class="video">
							<uv-icon name="play-right-fill" color="#FFF" size="20"></uv-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="empty" v-else-if="!recommendList.loading">
				<empty>暂无素材</empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		getVideoMaterialInfo,
		getCommentMaterialInfo
	} from '@/common/api.js'
	const app = getApp();
	export default {
		data() {
			return {
				tab: {
					active: 0,
					list: [{
						title: '点评素材',
						value: 0
					}, {
						title: '视频素材',
						value: 1
					}, {
						title: '素材库',
						value: 2
					}]
				},
				imageList: [],
				loadStatus: 'loadmore',
				recommendList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1
				},
				list: [], // 瀑布流全部数据
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				leftGap: 12,
				rightGap: 12,
				columnGap: 10
			};
		},
		computed: {
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		onShow() {
			uni.showTabBar()
			this.getData().then((res) => {
				this.loadStatus = res.hasMore ? 'loadmore' : 'nomore'
			})
		},
		onHide() {
			// this.$refs.waterfall.clear();
		},
		onReachBottom() {
			if (this.recommendList.hasMore && !this.browseList.loading) {
				this.loadStatus = 'loading'
				this.getData().then((res) => {
					this.loadStatus = res.hasMore ? 'loadmore' : 'nomore'
				})
			}
		},
		onLoad() {
			// this.getData().then((res) => {
			// 	this.loadStatus = res.hasMore ? 'loadmore' : 'nomore'
			// })
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},
			ckTab(index) {
				if (this.tab.active != index) {
					this.recommendList.page = 1
					this.recommendList.list = []
					if (this.tab.active != 2 && this.recommendList.list.length > 0) {
						this.$refs.waterfall.clear();
					}
					this.list1 = [] // 瀑布流第一列数据
					this.list2 = [] // 瀑布流第二列数据
					this.getData(index).then((res) => {
						this.tab.active = index
						this.loadStatus = res.hasMore ? 'loadmore' : 'nomore'
					})
				}
			},
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			// 模拟的后端数据
			getData(index = 0) {
				return new Promise((resolve, reject) => {
					this.recommendList.loading = true
					let params = {
						pageNo: this.recommendList.page,
						pageSize: 10
					};
					let url = index == 0 ? getCommentMaterialInfo : this.tab.active == 1 ?
						getVideoMaterialInfo : getVideoMaterialInfo
					url(params).then((result) => {
						let total = result.total;
						let data = result.rows;
						if (index == 0) {
							data.forEach(item => {
								item.commentUrl = JSON.parse(item.commentUrl)
							});
						}
						let {
							page,
							list,
							hasMore
						} = this.recommendList;
						if (page == 1) {
							hasMore = total > data.length;
							list.length = 0;
						} else {
							hasMore = total > (page - 1) * 10 + data.length;
						}
						list = [...list, ...data];
						if (hasMore) {
							page++;
						} else {
							page = 1
						}
						resolve({
							data: data.length,
							hasMore
						});
						this.recommendList.page = page;
						this.recommendList.list = list;
						this.recommendList.loading = false;
					}).catch((err) => {
						this.recommendList.loading = false;
						reject();
					});
				});
			},
			preview(videoUrl, poster) {
				if (videoUrl) {
					wx.previewMedia({
						current: 0,
						sources: [{
							url: videoUrl,
							type: 'video',
							poster: poster
						}],
						success: (res) => {
							console.log(res);
						},
						fail: (err) => {
							console.log(err);
						}
					})
				}
			},
			onDetails(item) {
				let link = this.tab.active == 0 ? 'page_account/material/details?id=' + item.id :
					'page_account/video/details?id=' + item.id
				app.navigationTo(link)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		min-height: 100vh;
		width: 100vw;
		padding: 24rpx;
		// padding: 40rpx;
		padding-top: 198rpx;
		box-sizing: border-box;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);

		.tab {
			margin-bottom: 30rpx;

			.tab-list {
				height: 120rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;

				.tab-item {
					// width: 306rpx;
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 16rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					text-align: center;

					&.active {
						background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
						color: #FFFFFF;
					}
				}
			}

			/*  */
		}

		.waterfall-item {
			background: linear-gradient(180deg, #FFFFFF 64%, rgba(255, 255, 255, 0.62) 100%);
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.waterfall-item__image {
				position: relative;

				.video {
					position: absolute;
					top: 28rpx;
					right: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 51rpx;
					height: 50rpx;
					background: rgba(216, 216, 216, 0.4);
					border-radius: 50%;
				}
			}

			image {
				border-radius: 16rpx;
			}

			.waterfall-item__ft {
				padding: 20rpx;
				box-sizing: border-box;

				.waterfall-item__ft__desc {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
					display: -webkit-box;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}

			.waterfall-item__b {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 20rpx 20rpx 20rpx;

				.waterfall-item__b_l {
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.look {
					width: 88rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}

		/deep/ .uv-waterfall {
			justify-content: center
		}

		.image-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.upload {
				width: calc(100% / 3 - 10rpx - 4rpx);
				padding-top: calc(100% / 3 - 10rpx - 4rpx);
				height: 0;
				position: relative;
				background: rgba(255, 255, 255, 0.3);
				border: 2rpx solid #FFFFFF;
				border-radius: 32rpx;
				flex-shrink: 0;
				margin-bottom: 10rpx;
				margin-right: 10rpx;

				.upload-box {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.upload-image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 20rpx;
				}

				.upload-text {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
					text-align: center;
				}
			}

			.image-item {
				width: calc(100% / 3 - 10rpx);
				padding-top: calc(100% / 3 - 10rpx);
				height: 0;
				flex-shrink: 0;
				position: relative;
				margin-bottom: 10rpx;
				margin-right: 10rpx;

				.video {
					position: absolute;
					left: calc(50% - 79rpx / 2);
					top: calc(50% - 73rpx / 2);
					display: flex;
					align-items: center;
					justify-content: center;
					width: 79rpx;
					height: 73rpx;
					background: rgba(216, 216, 216, 0.4);
					border-radius: 50%;
				}

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
				}

				.delete {
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					background: rgba(0, 0, 0, .2);
					z-index: 2;
				}
			}
		}
	}
</style>